<template>
  <div>
    <a-carousel class="ant-carousel" dotsClass="slick-dots" v-if="type==='-'">
      <div>
        <StaticLabel :sub-label-list.sync="outSub1"></StaticLabel>
      </div>
      <div>
        <StaticLabel :sub-label-list.sync="outSub2"></StaticLabel>
      </div>
      <div>
        <StaticLabel :sub-label-list.sync="outSub3"></StaticLabel>
      </div>
      <div>
        <DynamicLabel :sub-label-list="outAddLabel">
          <div class="item" @click="visible = true">
            <div class="icon-wrapper">
              <Icon name="addLabel" class="icon"></Icon>
            </div>
            <span class="text">添加类别</span>
          </div>
        </DynamicLabel>
      </div>
    </a-carousel>
    <a-carousel class="ant-carousel" dotsClass="slick-dots" v-else >
      <div>
        <StaticLabel :sub-label-list.sync="inSub"></StaticLabel>
      </div>
      <div>
        <DynamicLabel :sub-label-list="inAddLabel">
          <div class="item" @click="visible = true">
            <div class="icon-wrapper">
              <Icon name="addLabel" class="icon"></Icon>
            </div>
            <span class="text">添加类别</span>
          </div>
        </DynamicLabel>
      </div>
    </a-carousel>
    <a-modal
      title="请输入类别名称"
      :visible="visible"
      :destroyOnClose="true"
      @ok="handleAccountOk"
      @cancel="handleCancel">
      <a-input placeholder="最多支持四个字"
               allow-clear
               :maxLength='4'
               v-model="tagName"
               id="input">

      </a-input>
    </a-modal>
  </div>

</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';
  import payoutLabelList from '@/constants/payout-labelList.ts';
  import incomeLabelList from '@/constants/income-labelList.ts';
  import StaticLabel from '@/components/MakeRecord/StaticLabel.vue';
  import DynamicLabel from '@/components/MakeRecord/DynamicLabel.vue';
  import {Modal, Input} from 'ant-design-vue';

  @Component({
    components: {StaticLabel, DynamicLabel, Modal, Input}
  })
  export default class TagList extends Vue {
    @Prop() readonly type!: string;
    @Prop() tag!: Tag;

    visible = false
    out = payoutLabelList as Tag[];
    in = incomeLabelList as Tag[];
    outSub1 = this.out.slice(0, 10)
    outSub2 = this.out.slice(10, 20)
    outSub3 = this.out.slice(20, 30)
    inSub=this.in

    get outAddLabel(){
      return this.$store.state.payout_tagList;
    }
    get inAddLabel(){
      return this.$store.state.income_tagList;
    }

    tagName = ''

    handleAccountOk(){
      if (!this.tagName) {
        this.handleCancel();
      }
      this.$store.commit('createTag', {text: this.tagName, type: this.type});
      if(!this.$store.state.createTagFail){
        window.alert('添加成功！')
      }else{
        window.alert('添加失败！标签名重复！')
      }
      this.visible = false
    }

    handleCancel(){
      this.visible = false
    }
  }
</script>

<style lang='scss' scoped>
  @import '~@/assets/style/carousel.css';
  > .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    padding: 10px 0;
    > .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3em;
      height: 3em;
      border-radius: 50%;

      > .icon {
        width: 2em;
        height: 2em;
      }
    }

    > .text {
      padding: 5px 0;
    }
  }
</style>